<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card class="welcome-card" shadow="hover">
        <div class="welcome-content">
          <div class="welcome-icon">
            <el-icon><Promotion /></el-icon>
          </div>
          <div class="welcome-text">
            <h1 class="welcome-title">欢迎使用 军神网盘 网盘系统</h1>
            <p class="welcome-desc">
              {{ welcomeMessage }}
            </p>
            <div class="welcome-time">
              <el-icon><Clock /></el-icon>
              <span>{{ currentTime }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 小组件区域 -->
    <div class="widgets-section">
      <el-row :gutter="20">
        <!-- 钟表组件 -->
        <el-col :span="6">
          <el-card class="widget-card" shadow="hover">
            <template #header>
              <div class="widget-header">
                <el-icon><Clock /></el-icon>
                <span>时钟</span>
              </div>
            </template>
            <div class="clock-widget">
              <div class="clock-face">
                <!-- 数字标记 -->
                <div class="clock-number clock-number-12">12</div>
                <div class="clock-number clock-number-3">3</div>
                <div class="clock-number clock-number-6">6</div>
                <div class="clock-number clock-number-9">9</div>
                
                <!-- 小时刻度线 - 所有12个小时位置 -->
                <div class="clock-mark hour-mark hour-mark-1"></div>
                <div class="clock-mark hour-mark hour-mark-2"></div>
                <div class="clock-mark hour-mark hour-mark-3"></div> <!-- 3点位置的刻度线 -->
                <div class="clock-mark hour-mark hour-mark-4"></div>
                <div class="clock-mark hour-mark hour-mark-5"></div>
                <div class="clock-mark hour-mark hour-mark-6"></div> <!-- 6点位置的刻度线 -->
                <div class="clock-mark hour-mark hour-mark-7"></div>
                <div class="clock-mark hour-mark hour-mark-8"></div>
                <div class="clock-mark hour-mark hour-mark-9"></div> <!-- 9点位置的刻度线 -->
                <div class="clock-mark hour-mark hour-mark-10"></div> <!-- 10点位置的刻度线 -->
                <div class="clock-mark hour-mark hour-mark-11"></div>
                <div class="clock-mark hour-mark hour-mark-12"></div> <!-- 12点位置的刻度线 -->
                
                <!-- 分钟刻度线 - 每6度一个，共60个 -->
                <!-- 这里为了代码简洁，我们使用CSS生成每分钟的刻度线 -->
                
                <!-- 指针 -->
                <div class="clock-hour" :style="{ transform: `rotate(${hourAngle}deg)` }"></div>
                <div class="clock-minute" :style="{ transform: `rotate(${minuteAngle}deg)` }"></div>
                <div class="clock-second" :style="{ transform: `rotate(${secondAngle}deg)` }"></div>
                <div class="clock-center"></div>
              </div>
              <div class="clock-time-text">
                {{ clockTime }}
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 日历组件 -->
        <el-col :span="6">
          <el-card class="widget-card" shadow="hover">
            <template #header>
              <div class="widget-header">
                <el-icon><Calendar /></el-icon>
                <span>日历</span>
              </div>
            </template>
            <div class="calendar-widget">
              <el-calendar v-model="calendarDate">
                <template #date-cell="{ data }">
                  <div :class="getDateClass(data)">
                    {{ data.day.split('-').slice(2).join('-') }}
                  </div>
                </template>
              </el-calendar>
            </div>
          </el-card>
        </el-col>

        <!-- 热点信息列表 -->
        <el-col :span="12">
          <el-card class="widget-card" shadow="hover">
            <template #header>
              <div class="widget-header">
                <el-icon><HotWater /></el-icon>
                <span>热点信息</span>
                <el-button 
                  type="text" 
                  size="small" 
                  @click="refreshHotNews"
                  :icon="Refresh"
                  style="margin-left: auto"
                >
                  刷新
                </el-button>
              </div>
            </template>
            <div class="hot-news-list">
              <div 
                v-for="(news, index) in hotNewsList" 
                :key="index"
                class="news-item"
                @click="handleNewsClick(news)"
              >
                <div class="news-rank" :class="`rank-${index + 1}`">
                  {{ index + 1 }}
                </div>
                <div class="news-content">
                  <div class="news-title">{{ news.title }}</div>
                  <div class="news-meta">
                    <span class="news-source">{{ news.source }}</span>
                    <span class="news-time">{{ news.time }}</span>
                  </div>
                </div>
                <el-icon class="news-arrow"><ArrowRight /></el-icon>
              </div>
              <div v-if="hotNewsList.length === 0" class="news-empty">
                暂无热点信息
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 第二行小组件 -->
      <el-row :gutter="20" style="margin-top: 20px">
        <!-- 快捷操作 -->
        <el-col :span="6">
          <el-card class="widget-card" shadow="hover">
            <template #header>
              <div class="widget-header">
                <el-icon><Lightning /></el-icon>
                <span>快捷操作</span>
              </div>
            </template>
            <div class="quick-actions">
              <div 
                v-for="action in quickActions" 
                :key="action.name"
                class="action-item"
                @click="handleQuickAction(action)"
              >
                <div class="action-icon" :style="{ background: action.color }">
                  <el-icon><component :is="action.icon" /></el-icon>
                </div>
                <div class="action-name">{{ action.name }}</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 系统统计 -->
        <el-col :span="6">
          <el-card class="widget-card" shadow="hover">
            <template #header>
              <div class="widget-header">
                <el-icon><DataAnalysis /></el-icon>
                <span>系统统计</span>
              </div>
            </template>
            <div class="stats-widget">
              <div class="stat-item">
                <div class="stat-icon" style="background: #ecf5ff; color: #409eff">
                  <el-icon><FolderOpened /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ systemStats.totalFiles }}</div>
                  <div class="stat-label">总文件数</div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon" style="background: #f0f9ff; color: #67c23a">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ formatSize(systemStats.totalSize) }}</div>
                  <div class="stat-label">总存储量</div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon" style="background: #fef0f0; color: #f56c6c">
                  <el-icon><User /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ systemStats.totalUsers }}</div>
                  <div class="stat-label">用户数量</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 最近活动 -->
        <el-col :span="12">
          <el-card class="widget-card" shadow="hover">
            <template #header>
              <div class="widget-header">
                <el-icon><Bell /></el-icon>
                <span>最近活动</span>
              </div>
            </template>
            <div class="activity-list">
              <div 
                v-for="(activity, index) in recentActivities" 
                :key="index"
                class="activity-item"
              >
                <div class="activity-icon" :style="{ background: activity.color }">
                  <el-icon><component :is="activity.icon" /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
              <div v-if="recentActivities.length === 0" class="activity-empty">
                暂无最近活动
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 存储源列表 -->
    <div class="storage-section">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><FolderOpened /></el-icon>
          存储源列表
        </h2>
      </div>
      <div class="storage-list" v-loading="loading">
        <div v-if="storageList.length === 0" class="empty-state">
          <el-empty description="暂无存储源" />
        </div>
        <div v-else class="storage-grid">
          <div
            v-for="storage in storageList"
            :key="storage.key"
            class="storage-card"
            @click="goToStorage(storage.key)"
          >
            <div class="storage-icon">
              <el-icon><FolderOpened /></el-icon>
            </div>
            <div class="storage-info">
              <h3>{{ storage.name }}</h3>
              <p class="storage-type">{{ getStorageTypeName(storage.type) }}</p>
            </div>
            <div class="storage-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  FolderOpened, ArrowRight, Promotion, Clock, Calendar, HotWater,
  Refresh, Lightning, DataAnalysis, Bell, Document, User, Upload, Download, Delete, Edit, Search
} from '@element-plus/icons-vue'
import { storageApi, userApi } from '@/api'

const router = useRouter()
const storageList = ref([])
const loading = ref(false)
const currentTime = ref('')
const clockTime = ref('')
const userInfo = ref(null)
let timeInterval = null
let clockInterval = null

// 钟表相关
const hourAngle = ref(0)
const minuteAngle = ref(0)
const secondAngle = ref(0)

// 日历相关
const calendarDate = ref(new Date())

// 热点信息
const hotNewsList = ref([
  { title: '军神网盘 系统更新至 v4.3.2 版本', source: '系统公告', time: '2小时前' },
  { title: '新增 AI 智能助手功能模块', source: '功能更新', time: '5小时前' },
  { title: '天气查询系统正式上线', source: '功能更新', time: '1天前' },
  { title: '系统维护通知：本周六凌晨进行系统升级', source: '系统公告', time: '2天前' },
  { title: '存储源管理功能优化完成', source: '功能优化', time: '3天前' }
])

// 快捷操作
const quickActions = ref([
  { name: '上传文件', icon: 'Upload', color: '#409eff', action: 'upload' },
  { name: '下载文件', icon: 'Download', color: '#67c23a', action: 'download' },
  { name: '新建文件夹', icon: 'FolderOpened', color: '#e6a23c', action: 'newFolder' },
  { name: '搜索文件', icon: 'Search', color: '#f56c6c', action: 'search' }
])

// 系统统计
const systemStats = ref({
  totalFiles: 1258,
  totalSize: 1024 * 1024 * 1024 * 5.6, // 5.6GB
  totalUsers: 12
})

// 最近活动
const recentActivities = ref([
  { title: '用户 admin 上传了文件', time: '10分钟前', icon: 'Upload', color: '#409eff' },
  { title: '用户 admin 创建了新文件夹', time: '30分钟前', icon: 'FolderOpened', color: '#67c23a' },
  { title: '系统自动备份完成', time: '1小时前', icon: 'Document', color: '#e6a23c' },
  { title: '用户 admin 删除了文件', time: '2小时前', icon: 'Delete', color: '#f56c6c' }
])

const welcomeMessage = computed(() => {
  if (userInfo.value) {
    return `您好，${userInfo.value.nickname || userInfo.value.username}！欢迎回来，祝您使用愉快！`
  }
  return `欢迎使用 军神网盘，您可以浏览和管理您的文件。`
})

onMounted(async () => {
  await loadUserInfo()
  await loadStorageList()
  updateTime()
  updateClock()
  timeInterval = setInterval(updateTime, 1000)
  clockInterval = setInterval(updateClock, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  if (clockInterval) {
    clearInterval(clockInterval)
  }
})

const loadUserInfo = async () => {
  try {
    const res = await userApi.checkLogin()
    if (res.data?.isLogin) {
      userInfo.value = {
        username: res.data.username,
        nickname: res.data.nickname
      }
    }
  } catch (error) {
    // 忽略错误
  }
}

const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 更新钟表
const updateClock = () => {
  const now = new Date()
  const hours = now.getHours() % 12
  const minutes = now.getMinutes()
  const seconds = now.getSeconds()
  
  // 计算指针角度
  hourAngle.value = (hours * 30) + (minutes * 0.5) // 每小时30度，每分钟0.5度
  minuteAngle.value = minutes * 6 // 每分钟6度
  secondAngle.value = seconds * 6 // 每秒6度
  
  // 更新时间文本
  clockTime.value = `${String(now.getHours()).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
}

// 获取日期样式类
const getDateClass = (data) => {
  const today = new Date()
  const date = new Date(data.day)
  const isToday = date.toDateString() === today.toDateString()
  return {
    'calendar-date': true,
    'is-today': isToday
  }
}

// 刷新热点信息
const refreshHotNews = () => {
  // 模拟刷新，实际可以调用API
  ElMessage.success('热点信息已刷新')
}

// 处理新闻点击
const handleNewsClick = (news) => {
  console.log('点击新闻:', news)
  // 可以跳转到详情页或打开弹窗
}

// 处理快捷操作
const handleQuickAction = (action) => {
  console.log('快捷操作:', action.action)
  // 根据action执行相应操作
  ElMessage.info(`执行操作：${action.name}`)
}

// 格式化文件大小
const formatSize = (bytes) => {
  if (!bytes) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let index = 0
  let size = bytes
  while (size >= 1024 && index < units.length - 1) {
    size /= 1024
    index++
  }
  return `${size.toFixed(2)} ${units[index]}`
}

const loadStorageList = async () => {
  loading.value = true
  try {
    const res = await storageApi.getStorageList()
    storageList.value = res.data || []
  } catch (error) {
    console.error('加载存储源列表失败', error)
  } finally {
    loading.value = false
  }
}

const getStorageTypeName = (type) => {
  const typeMap = {
    'local': '本地存储',
    'aliyun': '阿里云 OSS',
    'tencent': '腾讯云 COS',
    'qiniu': '七牛云',
    's3': 'S3',
    'onedrive': 'OneDrive',
    'google-drive': 'Google Drive',
    'ftp': 'FTP',
    'sftp': 'SFTP'
  }
  return typeMap[type] || type
}

const goToStorage = (storageKey) => {
  router.push(`/storage/${storageKey}`)
}
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.welcome-section {
  margin-bottom: 30px;
}

.widgets-section {
  margin-bottom: 30px;
}

.widget-card {
  border-radius: 8px;
  height: 100%;
  
  // 时钟和日历卡片设置固定高度，使其更接近正方形
  &:has(.clock-widget),
  &:has(.calendar-widget) {
    :deep(.el-card__body) {
      padding: 10px;
      max-height: 280px;
      overflow: hidden;
    }
  }
  
  .widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    
    .el-icon {
      color: #409eff;
      font-size: 18px;
    }
  }
}

// 钟表组件样式 - 现代风格
.clock-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  min-height: 240px;
  
  .clock-face {
    position: relative;
    width: 150px;
    height: 150px;
    border: 5px solid #667eea;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    // 添加钟表刻度和数字标记
    
    // 内部刻度环
    &::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px solid rgba(102, 126, 234, 0.3);
      border-radius: 50%;
    }
    
    // 数字标记样式
    .clock-number {
      position: absolute;
      font-size: 14px;
      font-weight: bold;
      color: #4a56e2;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
    }
    
    // 使用基于度数的计算来精确定位数字
    .clock-number-12 {
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .clock-number-3 {
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    
    .clock-number-6 {
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .clock-number-9 {
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
    }
    
    // 刻度线基础样式
    .clock-mark {
      position: absolute;
      left: 50%;
      top: 12px;
      width: 2px;
      height: 6px;
      background-color: #667eea;
      transform-origin: 50% calc(75px - 12px);
      z-index: 5;
    }
    
    // 小时刻度样式
    .hour-mark {
      width: 3px;
      height: 8px;
      background-color: #4a56e2;
      z-index: 4;
    }
    
    // 分钟刻度线样式 - 每6度一个，共60个
    // 使用CSS伪元素生成所有分钟刻度线
    .clock-face::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
    }
    
    // 为时钟添加60个分钟刻度线
    .clock-face::before {
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent calc(100% - 5px),
        rgba(102, 126, 234, 0.5) calc(100% - 5px),
        rgba(102, 126, 234, 0.5) 100%
      );
      // 通过旋转创建所有分钟刻度
      transform: rotate(0deg);
    }
    
    // 为每个分钟位置创建刻度线
    .clock-face {
      position: relative;
    }
    
    // 使用CSS生成所有分钟刻度线（不包括小时刻度的位置）
    .clock-face::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      // 创建5分钟一个的次要刻度（长度稍短）
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent calc(100% - 3px),
        rgba(102, 126, 234, 0.3) calc(100% - 3px),
        rgba(102, 126, 234, 0.3) 100%
      );
      transform: rotate(0deg);
      // 覆盖小时刻度位置的分钟刻度
      mask-image: radial-gradient(circle, black 6px, transparent 6px);
      -webkit-mask-image: radial-gradient(circle, black 6px, transparent 6px);
    }
    
    // 为每个刻度设置正确的旋转角度 (每个小时30度)
    .hour-mark-1 {
      transform: translateX(-50%) rotate(30deg);
    }
    
    .hour-mark-2 {
      transform: translateX(-50%) rotate(60deg);
    }
    
    .hour-mark-4 {
      transform: translateX(-50%) rotate(120deg);
    }
    
    .hour-mark-5 {
      transform: translateX(-50%) rotate(150deg);
    }
    
    .hour-mark-7 {
      transform: translateX(-50%) rotate(210deg);
    }
    
    .hour-mark-8 {
      transform: translateX(-50%) rotate(240deg);
    }
    
    .hour-mark-9 {
      transform: translateX(-50%) rotate(270deg);
    }
    
    .hour-mark-11 {
      transform: translateX(-50%) rotate(330deg);
    }
    
    .hour-mark-10 {
      transform: translateX(-50%) rotate(300deg);
    }
    
    .hour-mark-6 {
      transform: translateX(-50%) rotate(180deg);
    }
    
    .hour-mark-3 {
      transform: translateX(-50%) rotate(90deg);
    }
    
    .hour-mark-12 {
      transform: translateX(-50%) rotate(0deg);
    }
    
    .clock-hour,
    .clock-minute,
    .clock-second {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: 50% 100%;
      border-radius: 4px;
    }
    
    .clock-hour {
      width: 4px;
      height: 45px;
      margin-left: -2px;
      margin-top: -45px;
      background: #4a56e2;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .clock-minute {
      width: 3px;
      height: 55px;
      margin-left: -1.5px;
      margin-top: -55px;
      background: #667eea;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      z-index: 2;
    }
    
    .clock-second {
      width: 2px;
      height: 65px;
      margin-left: -1px;
      margin-top: -65px;
      background: #ff4757;
      z-index: 3;
    }
    
    .clock-center {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 12px;
      background: #4a56e2;
      border-radius: 50%;
      margin-left: -6px;
      margin-top: -6px;
      z-index: 10;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
    }
  }
  
  .clock-time-text {
    font-size: 18px;
    font-weight: 700;
    color: #4a56e2;
    font-family: 'Digital', 'Courier New', monospace;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    // 添加数字时钟效果
    background: linear-gradient(90deg, #4a56e2, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

// 日历组件样式
.calendar-widget {
  max-height: 250px;
  overflow: hidden;
  
  :deep(.el-calendar) {
    border: none;
  }
  
  :deep(.el-calendar__header) {
    padding: 6px 0;
    border-bottom: 1px solid #e4e7ed;
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  :deep(.el-calendar__body) {
    padding: 2px 0;
  }
  
  :deep(.el-calendar-table) {
    font-size: 11px;
    thead th {
      padding: 4px 0;
      font-size: 11px;
    }
  }
  
  :deep(.el-calendar-table td) {
    padding: 2px;
    height: 28px;
  }
  
  :deep(.el-calendar-table .el-calendar-day) {
    height: 28px;
    padding: 0;
  }
  
  :deep(.calendar-date) {
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s;
    
    &:hover {
      background: #f5f7fa;
    }
    
    &.is-today {
      background: #409eff;
      color: #fff;
      font-weight: 600;
    }
  }
}

// 热点信息列表样式
.hot-news-list {
  max-height: 300px;
  overflow-y: auto;
  
  .news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 8px;
    
    &:hover {
      background: #f5f7fa;
    }
    
    .news-rank {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
      
      &.rank-1 {
        background: #fef0f0;
        color: #f56c6c;
      }
      
      &.rank-2 {
        background: #fdf6ec;
        color: #e6a23c;
      }
      
      &.rank-3 {
        background: #ecf5ff;
        color: #409eff;
      }
      
      &:not(.rank-1):not(.rank-2):not(.rank-3) {
        background: #f5f7fa;
        color: #909399;
      }
    }
    
    .news-content {
      flex: 1;
      min-width: 0;
      
      .news-title {
        font-size: 14px;
        color: #303133;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .news-meta {
        display: flex;
        gap: 12px;
        font-size: 12px;
        color: #909399;
        
        .news-source {
          color: #409eff;
        }
      }
    }
    
    .news-arrow {
      color: #c0c4cc;
      flex-shrink: 0;
    }
  }
  
  .news-empty {
    text-align: center;
    color: #909399;
    padding: 40px 0;
  }
}

// 快捷操作样式
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 10px;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    background: #f5f7fa;
    
    &:hover {
      background: #ecf5ff;
      transform: translateY(-2px);
    }
    
    .action-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      color: #fff;
      font-size: 24px;
    }
    
    .action-name {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
  }
}

// 系统统计样式
.stats-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px;
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f5f7fa;
    border-radius: 8px;
    
    .stat-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 24px;
      flex-shrink: 0;
    }
    
    .stat-info {
      flex: 1;
      
      .stat-value {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

// 最近活动样式
.activity-list {
  max-height: 300px;
  overflow-y: auto;
  
  .activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.3s;
    
    &:hover {
      background: #f5f7fa;
    }
    
    .activity-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: #fff;
      font-size: 18px;
      flex-shrink: 0;
    }
    
    .activity-content {
      flex: 1;
      min-width: 0;
      
      .activity-title {
        font-size: 14px;
        color: #303133;
        margin-bottom: 4px;
      }
      
      .activity-time {
        font-size: 12px;
        color: #909399;
      }
    }
  }
  
  .activity-empty {
    text-align: center;
    color: #909399;
    padding: 40px 0;
  }
}

.welcome-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  
  :deep(.el-card__body) {
    padding: 30px;
  }
}

.welcome-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.welcome-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  flex-shrink: 0;
  
  .el-icon {
    font-size: 40px;
    color: #fff;
  }
}

.welcome-text {
  flex: 1;
  color: #fff;
  
  .welcome-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #fff;
  }
  
  .welcome-desc {
    font-size: 16px;
    margin: 0 0 16px 0;
    opacity: 0.9;
    line-height: 1.6;
  }
  
  .welcome-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.8;
    
    .el-icon {
      font-size: 16px;
    }
  }
}

.storage-section {
  .section-header {
    margin-bottom: 20px;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      margin: 0;
      
      .el-icon {
        font-size: 24px;
        color: #409eff;
      }
    }
  }
}

.storage-list {
  max-width: 1200px;
  margin: 0 auto;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.storage-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 16px;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #409eff;
  }
}

.storage-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecf5ff;
  border-radius: 8px;
  color: #409eff;
  font-size: 24px;
  flex-shrink: 0;
}

.storage-info {
  flex: 1;
  min-width: 0;
  
  h3 {
    font-size: 16px;
    color: #303133;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .storage-type {
    font-size: 12px;
    color: #909399;
    margin: 0;
  }
}

.storage-arrow {
  color: #c0c4cc;
  font-size: 20px;
  flex-shrink: 0;
}
</style>

